<template>
  <div class="applet">
    <transition name="el-fade-in-linear">
      <div
        class="el-dialog__wrapper company exhibition"
        style="z-index: 1000;"
        v-if="visible"
        @click="writeMessageFun($event)"
      >
        <div
          role="dialog"
          aria-modal="true"
          aria-label="环节配置"
          class="el-dialog"
          style="margin-top: 15vh; width: 414px;z-index:2018"
          ref="msk"
        >
          <div class="exhibition-H5">
            <div class="exhibition-H5_top">
              <img src="@/assets/images/tab.png" alt width="100%" />
              <div class="exhibition-H5_tab">
                <i class="el-icon-arrow-left"></i>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="bageList.productName"
                  placement="top"
                >
                  <p class="ssl" style="-webkit-box-orient: vertical;">{{bageList.productName}}</p>
                </el-tooltip>
              </div>
            </div>
            <div class="exhibition-H5_title">
              <!-- v-if="bageList[0].children[3].value == 1 && bageList[0].children[0].state" -->
              <div
                v-if="bageList.traceAppTemplateDto.showHintFirstText"
              >{{bageList.traceAppTemplateDto.hintFirstText}}</div>

              <!-- v-if="bageList[0].children[3].value != 1 && bageList[0].children[1].state" -->
              <div
                v-if="bageList.traceAppTemplateDto.showHintMultText"
              >{{bageList.traceAppTemplateDto.hintMultText}}</div>
            </div>
            <van-swipe :autoplay="3000">
              <van-swipe-item v-for="(image, index) in imgUrl" :key="index">
                <img :src="image" width="100%" />
              </van-swipe-item>
            </van-swipe>
            <div class="exhibition-H5_main">
              <div class="exhibition-H5_content">
                <p class="exhibition-H5_contenTop">查询信息</p>
                <div class="exhibition-H5_contentCn">
                  <p>
                    <span>您查询的是</span>
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="bageList.productName"
                      placement="top"
                    >
                      <span
                        class="ssl"
                        style="-webkit-box-orient: vertical;"
                      >{{bageList.productName}}</span>
                    </el-tooltip>
                  </p>
                  <p v-if="bageList.traceAppTemplateDto.showSourceCode">
                    <span>溯源码</span>
                    -
                  </p>
                  <p v-if="bageList.traceAppTemplateDto.showQueryCount">
                    <span>查询次数</span>
                    -
                  </p>
                  <p v-if="bageList.traceAppTemplateDto.showFirstQueryTime">
                    <span>首次查询时间</span>
                    -
                  </p>
                  <p v-if="bageList.traceAppTemplateDto.showFirstQueryAddress">
                    <span>首次查询地点</span>
                    -
                  </p>
                </div>
              </div>
              <div
                class="exhibition-H5_content"
                v-if="bageList.traceAppTemplateDto.showProductInfo"
              >
                <p class="exhibition-H5_contenTop">商品信息</p>
                <div class="exhibition-H5_contentCn">
                  <p>
                    <span>商品名称</span>
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="bageList.productName"
                      placement="top"
                    >
                      <span
                        class="ssl"
                        style="-webkit-box-orient: vertical;"
                      >{{bageList.productName}}</span>
                    </el-tooltip>
                  </p>
                  <p>
                    <span>商品品牌</span>
                    {{bageList.brandName}}
                  </p>
                  <p>
                    <span>商品规格</span>
                    {{bageList.productSpec}}
                  </p>
                  <p v-for="(item,index) in bageList.options" :key="index">
                    <span>{{item.name}}</span>
                    {{item.content}}
                  </p>
                </div>
                <img class="bottomImg" src="@/assets/images/lianjie.png" alt />
              </div>
              <div class="exhibition-H5_content" v-for="(t,i) in bageList.list" :key="i">
                <div v-if="t.showLink">
                  <p class="exhibition-H5_contenTop">{{t.linkTitle}}</p>
                  <div class="exhibition-H5_contentDn">
                    <div v-for="(item,index) in t.linkContent" :key="index">
                      <div class="contentDn-main">
                        <i class="exhibition-H5_line" v-if="index != t.linkContent.length-1"></i>
                        <span class="contentDn-main_top">
                          <b></b>
                        </span>
                        <div class="contentDn-main_con">
                          <h3>{{item.title}}</h3>
                          <p v-if="item.type == '1'">{{item.content}}</p>
                          <img v-else :src="item.content" alt style="width:100px;display:block" />
                          <span>{{item.linkChildTime | dateformat}}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <img class="bottomImg" src="@/assets/images/lianjie.png" alt />
                </div>
              </div>
              <div style="marginTop:10px">
                <img :src="bageList.traceAppTemplateDto.bottomBanner" alt width="100%" />
              </div>
              <div class="qukuai">
                <p>
                  <img src="@/assets/images/pic_qukuai.png" alt width="16" /> 区块Hash：--
                </p>
                <p>©2020数据来源于布鲁克商城，Columbu提供技术支持</p>
              </div>
            </div>
            <div class="exhibition-H5_bottom my-btn">
              <el-button type="primary" icon="el-icon-shopping-cart-2">再次购买</el-button>
              <div class="share">
                <el-button type="primary" icon="el-icon-share">分享</el-button>
              </div>
            </div>
          </div>
        </div>
        <span
          role="dialog"
          aria-modal="true"
          aria-label="环节配置"
          class="el-dialog"
          style="margin-top: 15vh; width: 552px;"
          ref="msk1"
        >
          <div class="el-dialog__header">
            <span class="el-dialog__title">溯源展示配置</span>
            <button type="button" aria-label="Close" class="el-dialog__headerbtn">
              <i class="el-dialog__close el-icon el-icon-close" @click="visibleState" ref="msk2"></i>
            </button>
          </div>
          <div class="el-dialog__body">
            <div class="confi-title">
              <p>展示全部</p>
              <el-switch
                v-model="aaa"
                active-color="#13ce66"
                inactive-color="#ddd"
                @change="changeState(-1)"
                :active-value="1"
                :inactive-value="0"
              ></el-switch>
            </div>
            <div class="confi-main">
              <div class="confi-content">
                <div class="confi-content_head">
                  <span>头部展示</span>
                </div>
                <div class="confi-content_dispaly">
                  <div
                    class="confi-content_dispalyF"
                    style="justifyContent:flex-start;align-items: flex-start;"
                  >
                    <p>头部banner</p>
                    <div v-if="imgUrl.length">
                      <img
                        v-for="(item,index) in imgUrl"
                        :key="index"
                        :src="item"
                        class="avatar"
                        width="100"
                        height="100"
                      />
                    </div>
                    <el-upload
                      class="avatar-uploader"
                      :action="BASE_URL"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload"
                      :headers="{'Authorization':Authorization}"
                      list-type="picture-card"
                      :data="{'folderName':'shop'}"
                    >
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </div>
                  <div class="confi-content_dispalyF">
                    <p>首次查询提示</p>
                    <el-input
                      v-model="bageList.traceAppTemplateDto.hintFirstText"
                      placeholder="请输入查询提示"
                    ></el-input>
                    <el-switch
                      v-model="bageList.traceAppTemplateDto.showHintFirstText"
                      active-color="#13ce66"
                      inactive-color="#ddd"
                      @change="changeState(1)"
                      :active-value="1"
                      :inactive-value="0"
                    ></el-switch>
                  </div>
                  <div class="confi-content_dispalyF">
                    <p>多次查询提示</p>
                    <el-input
                      v-model="bageList.traceAppTemplateDto.hintMultText"
                      placeholder="请输入查询提示"
                    ></el-input>
                    <el-switch
                      v-model="bageList.traceAppTemplateDto.showHintMultText"
                      active-color="#13ce66"
                      inactive-color="#ddd"
                      @change="changeState(1)"
                      :active-value="1"
                      :inactive-value="0"
                    ></el-switch>
                  </div>
                  <div class="confi-content_dispalyF">
                    <p>溯源码</p>
                    <el-switch
                      v-model="bageList.traceAppTemplateDto.showSourceCode"
                      active-color="#13ce66"
                      inactive-color="#ddd"
                      @change="changeState(1)"
                      :active-value="1"
                      :inactive-value="0"
                    ></el-switch>
                  </div>
                  <div class="confi-content_dispalyF">
                    <p>查询次数</p>
                    <el-switch
                      v-model="bageList.traceAppTemplateDto.showQueryCount"
                      active-color="#13ce66"
                      inactive-color="#ddd"
                      @change="changeState(1)"
                      :active-value="1"
                      :inactive-value="0"
                    ></el-switch>
                  </div>
                  <div class="confi-content_dispalyF">
                    <p>首次查询时间</p>
                    <el-switch
                      v-model="bageList.traceAppTemplateDto.showFirstQueryTime"
                      active-color="#13ce66"
                      inactive-color="#ddd"
                      @change="changeState(1)"
                      :active-value="1"
                      :inactive-value="0"
                    ></el-switch>
                  </div>
                  <div class="confi-content_dispalyF">
                    <p>首次查询地址</p>
                    <el-switch
                      v-model="bageList.traceAppTemplateDto.showFirstQueryAddress"
                      active-color="#13ce66"
                      inactive-color="#ddd"
                      @change="changeState(1)"
                      :active-value="1"
                      :inactive-value="0"
                    ></el-switch>
                  </div>
                </div>
              </div>
              <div class="confi-content">
                <div class="confi-content_head confi-content_head1">
                  <div>
                    <span>商品信息</span>
                  </div>
                  <el-switch
                    v-model="bageList.traceAppTemplateDto.showProductInfo"
                    active-color="#13ce66"
                    inactive-color="#ddd"
                    @change="changeState(1)"
                    :active-value="1"
                    :inactive-value="0"
                  ></el-switch>
                </div>
                <div class="confi-content_dispaly">
                  <div class="confi-content_dispalyF">
                    <p style="display:flex;justify-content:space-between;">
                      商品名称：
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="bageList.productName"
                        placement="top"
                      >
                        <span
                          class="ssl"
                          style="-webkit-box-orient: vertical;"
                        >{{bageList.productName}}</span>
                      </el-tooltip>
                    </p>
                  </div>
                  <div class="confi-content_dispalyF">
                    <p>商品品牌：{{bageList.brandName}}</p>
                  </div>
                  <div class="confi-content_dispalyF">
                    <p>商品规格：{{bageList.productSpec}}</p>
                  </div>
                  <div
                    class="confi-content_dispalyF"
                    v-for="(item,index) in bageList.options"
                    :key="index"
                  >
                    <p>{{item.name}}：{{item.content}}</p>
                  </div>
                </div>
              </div>
              <div class="confi-content">
                <div class="confi-content_head confi-content_head1">
                  <div>
                    <span>溯源环节</span>
                  </div>
                </div>
                <div class="confi-content_dispaly">
                  <div
                    class="confi-content_dispalyF"
                    v-for="(item,index) in bageList.list"
                    :key="index"
                  >
                    <p>{{item.linkTitle}}</p>
                    <el-switch
                      v-model="item.showLink"
                      active-color="#13ce66"
                      inactive-color="#ddd"
                      @change="changeState(index)"
                      :active-value="1"
                      :inactive-value="0"
                    ></el-switch>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="el-dialog__footer">
            <span class="dialog-footer">
              <button
                type="button"
                class="el-button el-button--default"
                @click="visibleState"
                ref="msk2"
              >
                <span>取 消</span>
              </button>
              <button type="button" class="el-button el-button--primary" @click="goOut" ref="msk2">
                <span>确 定</span>
              </button>
            </span>
          </div>
        </span>
      </div>
    </transition>
  </div>
</template>

<script>
import { BASE_URL } from "@/utils/service.js";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    bageList: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      aaa: 0,
      BASE_URL,
      imgUrl: [],
      Authorization: "",
      options: [],
    };
  },
  created() {
    this.Authorization = localStorage.getItem("intrachaincode");
  },
  methods: {
    visibleState() {
      this.$emit("func", false);
    },
    writeMessageFun(ev) {
      if (this.$refs.msk) {
        if (
          !this.$refs.msk.contains(ev.target) &&
          !this.$refs.msk1.contains(ev.target)
        ) {
          this.$emit("func", false);
        }
      }
    },
    async goOut() {
      let arr = [];
      this.bageList.list.map((el) => {
        if (el.showLink) {
          arr.push(el.linkId);
        }
      });
      let obj = {
        appTemplateName: this.bageList.appTemplateName,
        batchId: this.bageList.batchId,
        templateAppId: this.bageList.templateAppId,
        traceAppTemplateDto: {
          banners: this.imgUrl.toString(),
          hintFirstText: this.bageList.traceAppTemplateDto.hintFirstText,
          hintMultText: this.bageList.traceAppTemplateDto.hintMultText,
          showFirstQueryAddress: this.bageList.traceAppTemplateDto
            .showFirstQueryAddress,
          showFirstQueryTime: this.bageList.traceAppTemplateDto
            .showFirstQueryTime,
          showHintFirstText: this.bageList.traceAppTemplateDto
            .showHintFirstText,
          showHintMultText: this.bageList.traceAppTemplateDto.showHintMultText,
          showLinkIds: arr,
          showProductInfo: this.bageList.traceAppTemplateDto.showProductInfo,
          showQueryCount: this.bageList.traceAppTemplateDto.showQueryCount,
          showSourceCode: this.bageList.traceAppTemplateDto.showSourceCode,
        },
      };
      const res = await this.axios.addTraceAppProductInfoTemplate(obj);
      if (res.data.code == 200) {
        this.$message({
          message: res.data.message,
          type: "success",
          duration: 1500,
          onClose: () => {
            this.$emit("func", false);
          },
        });
      }
    },
    async getTraceTemplatePageList() {
      let obj = {
        contentType: 1,
        pageNum: 1,
        pageSize: 10,
      };
      const res = await this.axios.getTraceTemplatePageList(obj);
      console.log(JSON.parse(res.data.data.list[0].content));
    },
    handleAvatarSuccess(res, file) {
      this.imgUrl.push(res.data.url);
    },
    beforeAvatarUpload(file) {
      // 上传图片
      const typeArr = ["image/jpeg", "image/png", "image/gif"];
      const isLt2M = file.size / 1024 / 1024 < 1;
      const typeType = typeArr.indexOf(file.type);
      if (typeType < 0) {
        this.$message.error("请选择JPG/PNG/GIF格式的图片!");
      }
      if (!isLt2M) {
        this.$message.error("请选择不超过1MB的图片!");
      }
      return typeType >= 0 && isLt2M;
    },
    changeState(index) {
      if (index == -1 && this.aaa == 1) {
        (this.bageList.traceAppTemplateDto.showFirstQueryAddress = 1),
          (this.bageList.traceAppTemplateDto.showFirstQueryTime = 1),
          (this.bageList.traceAppTemplateDto.showHintFirstText = 1),
          (this.bageList.traceAppTemplateDto.showHintMultText = 1),
          (this.bageList.traceAppTemplateDto.showProductInfo = 1),
          (this.bageList.traceAppTemplateDto.showQueryCount = 1),
          (this.bageList.traceAppTemplateDto.showSourceCode = 1);
        this.bageList.list.map((el) => {
          el.showLink = 1;
        });
      } else if (index == -1 && this.aaa == 0) {
        (this.bageList.traceAppTemplateDto.showFirstQueryAddress = 0),
          (this.bageList.traceAppTemplateDto.showFirstQueryTime = 0),
          (this.bageList.traceAppTemplateDto.showHintFirstText = 0),
          (this.bageList.traceAppTemplateDto.showHintMultText = 0),
          (this.bageList.traceAppTemplateDto.showProductInfo = 0),
          (this.bageList.traceAppTemplateDto.showQueryCount = 0),
          (this.bageList.traceAppTemplateDto.showSourceCode = 0);
        this.bageList.list.map((el) => {
          el.showLink = 0;
        });
      } else {
        this.aaa = 1;
        this.bageList.list.map((el) => {
          if (el.showLink == 0) {
            this.aaa = 0;
          }
        });
        if (!this.bageList.traceAppTemplateDto.showFirstQueryAddress)
          this.aaa = 0;
        if (!this.bageList.traceAppTemplateDto.showFirstQueryTime) this.aaa = 0;
        if (!this.bageList.traceAppTemplateDto.showHintFirstText) this.aaa = 0;
        if (!this.bageList.traceAppTemplateDto.showHintMultText) this.aaa = 0;
        if (!this.bageList.traceAppTemplateDto.showProductInfo) this.aaa = 0;
        if (!this.bageList.traceAppTemplateDto.showQueryCount) this.aaa = 0;
        if (!this.bageList.traceAppTemplateDto.showSourceCode) this.aaa = 0;
      }
    },
  },
  watch: {
    visible(curVal, oldVal) {
      if (curVal) {
        this.imgUrl = this.bageList.traceAppTemplateDto.banners
          ? this.bageList.traceAppTemplateDto.banners.split(",")
          : [];
        this.changeState();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.applet {
  /deep/ .van-swipe {
    min-height: 150px;
  }
  /deep/ .el-upload--picture-card {
    width: 100px;
    height: 100px;
    line-height: 110px;
  }
  .myImgUrl {
    display: flex;
  }
  .exhibition {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-color: rgba(0, 0, 0, 0.5);
    .el-dialog {
      margin: 0 25px 50px;
      .el-dialog__header {
        border-bottom: 1px solid #ddd;
        .el-dialog__title {
          font-weight: bold;
        }
      }
      .el-dialog__body {
        padding-top: 10px;
        .confi-title {
          display: flex;
          justify-content: space-between;
          font-size: 16px;
        }
        .confi-main {
          border: 1px solid #ddd;
          padding: 5px 1px;
          margin: 10px 0;
          .confi-content {
            .confi-content_head {
              font-size: 15px;
              font-weight: bold;
              i {
                display: inline-block;
                margin-left: 15px;
                font-weight: bold;
              }
            }
            .confi-content_head1 {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding-right: 10px;
            }
            .confi-content_dispaly {
              padding: 10px;
              .confi-content_dispalyF {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin: 10px 0;
                p {
                  min-width: 100px;
                }
                /deep/ .el-input__inner {
                  line-height: 25px;
                  height: 25px;
                  width: 70%;
                }
                .avatar-uploader {
                  width: 100px;
                  height: 100px;
                  cursor: pointer;
                  .avatar {
                    width: 100px;
                    height: 100px;
                  }
                  .upimg {
                    width: 100px;
                    height: 100px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    i {
                      font-size: 18px;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .exhibition-H5 {
        overflow-y: auto;
        height: 736px;
        position: relative;
        background-color: #f5f5f5;
        .exhibition-H5_top {
          position: sticky;
          top: 0;
          left: 0;
          right: 0;
          background-color: #fff;
          z-index: 99;
        }
        .exhibition-H5_bottom {
          position: sticky;
          bottom: 0;
          left: 0;
          right: 0;
          background-color: #fff;
          z-index: 99;
          padding: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          /deep/ .el-button {
            border-radius: 18px;
            i {
              font-size: 16px;
            }
          }
          .share {
            margin-left: 15px;
            /deep/ .el-button {
              background-color: #ffb31a;
              border-color: #ffb31a;
            }
            /deep/ .el-button--primary.is-active,
            .el-button--primary:active {
              background: #da9a1b;
              border-color: #da9a1b;
            }
          }
        }
        .exhibition-H5_tab {
          display: flex;
          justify-content: space-between;
          padding: 15px;
          align-items: center;
          i {
            font-weight: bold;
            font-size: 18px;
          }
          p {
            flex: 1;
            text-align: center;
            padding-right: 15px;
            font-size: 18px;
            font-weight: bold;
          }
        }
        .exhibition-H5_title {
          div {
            background-color: #f8efa7;
            color: #e76d56;
            line-height: 24px;
            text-align: center;
          }
        }
        .exhibition-H5_main {
          position: relative;
          margin: -30px 15px 10px;
          .exhibition-H5_content {
            .exhibition-H5_contenTop {
              height: 50px;
              line-height: 50px;
              margin: 0 auto;
              padding-left: 15px;
              background: rgba(246, 252, 251, 1);
              border-radius: 10px 10px 0px 0px;
              font-weight: bold;
              font-size: 16px;
            }
            .exhibition-H5_contentCn {
              background-color: #fff;
              padding: 0 15px 25px;
              border-radius: 0 0 10px 10px;
              p {
                padding: 10px 0;
                border-bottom: 1px solid #ddd;
                display: flex;
                justify-content: space-between;
                span {
                  color: #999;
                }
              }
            }
            .exhibition-H5_contentDn {
              padding: 20px;
              padding-bottom: 1px;
              background: #fff;
              position: relative;
              border-radius: 0 0 10px 10px;
              .contentDn-main {
                display: flex;
                margin-bottom: 15px;
                position: relative;
                .exhibition-H5_line {
                  position: absolute;
                  top: 22px;
                  left: 10px;
                  bottom: -17px;
                  width: 1px;
                  background-color: #e9eef2;
                }
                .contentDn-main_top {
                  position: relative;
                  flex-shrink: 0;
                  margin-right: 10px;
                  width: 20px;
                  height: 20px;
                  border-radius: 50%;
                  background-color: #cff0e9;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  margin-top: 2px;
                  b {
                    display: block;
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    background-color: #5fc7bd;
                  }
                }
                .contentDn-main_con {
                  p {
                    margin: 6px 0;
                  }
                  span {
                    color: #999;
                  }
                }
              }
            }
          }
          .qukuai {
            margin-top: 10px;
            p {
              img {
                margin-right: 8px;
              }
              display: flex;
              align-items: center;
              justify-content: center;
              line-height: 22px;
              font-size: 16px;
              color: #5bc6bb;
            }
            p + p {
              font-size: 14px;
              color: #999;
            }
          }
          .exhibition-H5_content + .exhibition-H5_content {
            margin-top: 10px;
            position: relative;
            .bottomImg {
              width: 94%;
              position: absolute;
              top: -24px;
              left: 10px;
            }
          }
        }
      }
      .exhibition-H5::-webkit-scrollbar {
        width: 0px;
      }
    }
  }
  .ssl {
    width: 260px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
  }
}
</style>
